<script setup>
import { ElMessage } from 'element-plus'
import axios from 'axios'
import { nextTick, onMounted, ref } from 'vue'
import { useUserStore } from '../../store/useUserStore'
const {changeRoute}=useUserStore()
const tableData = ref([])

const rightlist=ref([])

onMounted(()=>{
  getList()
  getRightList()
})

const getList=async ()=>{
 const res= await axios.get('/adminapi/roles')
//  console.log(res)
//  console.log(res.data[0].rights)
  tableData.value=res.data
  // console.log(tableData.value)
}
// 获取权限列表
const getRightList=async ()=>{
 const res= await axios.get('/adminapi/rights')
 rightlist.value=res.data
  // console.log(tableData.value.rights)
}

const currentItem=ref()
// 更新 传递id
const handleUpdate = (item)=>{
  // console.log(item)
  showRoleDialog.value=true
  currentItem.value=item
updataRoleForm.value.roleName=item.roleName

nextTick(()=>{
  // 字符串转化为数组

  treeRef.value.setCheckedKeys(JSON.parse(item.rights))
})
// 设置当前rights给tree
}



// 删除
const handleRemove=async (item)=>{
// console.log(item)
  await axios.delete(`/adminapi/roles/${item.id}`)
  // 提示消息删除成功
  // console.log(res)
  ElMessage.success('删除成功')
  // 重新渲染
  getList()
}

// 取出数据
const defaultProps = {
  label:'title'
}

// 自定义树形组件
const renderContent = (
  h,
  {
    node,
    data,
  }
) => {
  // console.log(data)
  return h(
    'span',
    {
      class: `custom-tree-node ${currentRights.value.includes(data.path)? 'active':''}`,
    },
    h('span', null, node.label),
)}

const currentRights=ref([])
const handleHover=(item)=>{
  // console.log(item)
  currentRights.value=item.rights
}



// 更新对话框
const showRoleDialog = ref(false)
// const currentItem=ref({})
const updataRoleFormRef=ref()
const updataRoleForm=ref({
  roleName:''
})
const rules=({
  roleName:[{
    required:true,
    message:'请输入角色名称',
    trigger:'blur'
  }]
})

// 确认更新
const handleConfirm=async ()=>{



  // 进行校验
  // console.log(currentItem.value)
  // console.log(updataRoleForm.value,treeRef.value.getCheckedKeys(),currentItem.value.id)
  updataRoleFormRef.value.validate(async (valid)=>{
    if(valid){
   // 输入成功
    // 发送请求
    await axios.put(`/adminapi/roles/${currentItem.value.id}`,{
      roleName:updataRoleForm.value.roleName,
      rights:JSON.stringify(treeRef.value.getCheckedKeys())
     })
    changeRoute(JSON.stringify(treeRef.value.getCheckedKeys()))
    //  changeRoute()
    // console.log(res)
   ElMessage.success('更新成功')
   
    // 刷新列表
    getList()
    getRightList()
  // 关闭对话框
  showRoleDialog.value=false
    }else{
      ElMessage.error('请输入角色名称')
    }
  })
}

const treeRef=ref()
</script>

<template>
 <div>
  <el-table  stripe :data="tableData" style="width: 100%">
    <!-- <el-table-column prop="roleName" label="角色名称" width="280" /> -->
    <!-- <el-table-column prop="icon" label="图标" width="180" /> -->
    
    <el-table-column label="角色名称">
      <template #default="scope">
        <el-popover
        @before-enter="handleHover(scope.row)"
        placement="right"
        title="权限详情"
        :width="200"
        trigger="hover"
  >
    <template #reference>
      <el-button class="m-2">{{scope.row.roleName}}</el-button>
    </template>
    <template #default>
      <!-- 树形组件 -->
      <el-tree
    :data="rightlist"
    :default-expand-all="true"
    :props="defaultProps"
     :render-content="renderContent"
  />
    </template>
  </el-popover>
      </template>
    </el-table-column>
    
    <el-table-column label="操作" >
      <template #default="scope">
        <el-button style="margin-right: 5px;" size="large" round type="primary" color="#626aef" @click="handleUpdate(scope.row)">
          更新
        </el-button>
        <el-popconfirm title="你确定要删除吗?"
         @confirm="handleRemove(scope.row)"
         confirm-button-text="确定"
          cancel-button-text="取消"
          confirm-button-type="warning"
          cancel-button-type="info"
         >
          <template #reference>
      <el-button size="large"  round type="danger" >删除</el-button>
    </template>
  </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>

 </div>
 <el-dialog
    v-model="showRoleDialog"
    title="更新角色·"
    width="500"
    align-center
  >
  <el-form
    ref="updataRoleFormRef"
    style="max-width: 1800px;"
    :model="updataRoleForm"
    status-icon
    :rules="rules"
    label-width="80"
    class="demo-ruleForm"
  >
    <el-form-item label="角色名称" prop="roleName">
      <el-input 
      v-model="updataRoleForm.roleName"
       type="text" 
        />
    </el-form-item>
    <!-- ${currentRights.value.includes(data.path)? 'active':''} -->
    <el-form-item label="角色权限" prop="rights">
      <el-tree
      :check-strictly="true"
    :data="rightlist"
    show-checkbox
    node-key="path"
    ref="treeRef"
    :props="defaultProps"
    :default-expand-all="true"

  />
    </el-form-item>
   

  </el-form>


    <template #footer >
      <div class="dialog-footer" >
        <el-button type="primary" @click="handleConfirm()">
          更新
        </el-button>
        <el-button @click="showRoleDialog = false">取消</el-button>
       
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
  :deep(.active){
    color:#f56c6c ;
  }
</style>
